<template>
  <div style="width: 500px; height: 500px">
    <VueUeditorWrap v-model="userAgreement" :config="myConfig" editor-id="editor-cos-demo" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import VueUeditorWrap from 'vue-ueditor-wrap';

  const userAgreement = ref();
  const myConfig = ref({
    // 编辑器不自动被内容撑高
    autoHeightEnabled: false,
    // 初始容器高度
    initialFrameHeight: 400,
    // 初始容器宽度
    initialFrameWidth: '100%',
    UEDITOR_HOME_URL: '/UEditor/',
    serverUrl: '/api' + '/system/ueditor/opt',
    toolbars: [
      [
        'fullscreen',
        'source',
        '|',
        'undo',
        'redo',
        '|',
        'bold',
        'italic',
        'underline',
        'fontborder',
        'strikethrough',
        'superscript',
        'subscript',
        'removeformat',
        'formatmatch',
        'autotypeset',
        'blockquote',
        'pasteplain',
        '|',
        'forecolor',
        'backcolor',
        'insertorderedlist',
        'insertunorderedlist',
        'selectall',
        'cleardoc',
        '|',
        'rowspacingtop',
        'rowspacingbottom',
        'lineheight',
        '|',
        'customstyle',
        'paragraph',
        'fontfamily',
        'fontsize',
        '|',
        'directionalityltr',
        'directionalityrtl',
        'indent',
        '|',
        'justifyleft',
        'justifycenter',
        'justifyright',
        'justifyjustify',
        '|',
        'touppercase',
        'tolowercase',
        '|',
        'imagenone',
        'imageleft',
        'imageright',
        'imagecenter',
        '|',
        'simpleupload',
        'insertcode',
        'pagebreak',
        '|',
        'horizontal',
        'date',
        'time',
        'wordimage',
        '|',
        'inserttable',
        'deletetable',
        'insertparagraphbeforetable',
        'insertrow',
        'deleterow',
        'insertcol',
        'deletecol',
        'mergecells',
        'mergeright',
        'mergedown',
        'splittocells',
        'splittorows',
        'splittocols',
        '|',
        'print',
      ],
    ],
    autoFloatEnabled: false,
  });
</script>

<style scoped></style>
